<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./tree.css">
<body>
	<div id="treediv" class="tree"></div>
<script>
function Tree(data, el) {
    this.app=function(par,tag){return par.appendChild(document.createElement(tag))};
    this.create(document.getElementById(el),data)
};
Tree.prototype = {
    create: function (par,group){
        var host=this, length = group.length;
        for (var i = 0; i < length; i++) {
            var dl =this.app(par,'DL'), dt = this.app(dl,'DT'), dd = this.app(dl,'DD');
            var tmp=typeof(group[i]['url'])=="undefined"?"javascript:void(0)":group[i]['url'];
            dt.innerHTML='<a href='+tmp+'>'+group[i]['t']+'</a>';
            if (!group[i]['s'])continue;
            dt.group=group[i]['s'];
            dt.className+=" node-close";
            dt.onclick=function (){
                var dd= this.nextSibling;
                if (!dd.hasChildNodes()){
                     host.create(dd,this.group);
                     this.className='node-open'
                 }else{
                    var set=dd.style.display=='none'?['','node-open']:['none','node-close'];
                     dd.style.display=set[0];
                     this.className=set[1]
                 }
            }
        }
    }
};
var data=[
{t:'节点一',s:[
	{t:'节点二',s:[
			{t:'节点三',s:[
					{t:'节点四',url:'http://'},
					{t:'节点四',url:'http://'},
					{t:'节点四',url:'http://'},
					{t:'节点四',url:'http://'},
				]},	
			{t:'节点三',url:'http://'},
			{t:'节点三',url:'http://'},
		]},
	{t:'节点二',url:'http://'},	
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'}
]
},	
{t:'节点一',
	s:[
	{t:'节点二',url:'http://'},
	{t:'节点二',url:'http://'}
	]
}
];
var et=new Tree(data,'treediv');
</script>
</body>
</html>